<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>查看评论</title>
    <link rel="stylesheet" href="/static/plugs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <script src="/static/plugs/jquery/jquery-3.1.1.min.js"></script>
    <script src="/static/plugs/bootstrap/jquery.slim.min.js"></script>
    <script src="/static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/initial.js"></script>
    <style>
        .wrap{
            width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .search-header{
            width: 1440px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*border: 1px red solid;*/
            .search-title-wrap{
                display: flex;
                justify-content: center;
                align-items: center;
                .search-title-icon{
                    width: 48px;
                    height: 48px;
                    background: url("/static/images/logo.png") 100% 100%;
                    background-size: contain;
                    margin-right: 20px;
                }
                .search-title a{
                    color:darkmagenta;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .search-input-wrap{
                width: 650px;
                height: 80px;
                display: flex;
                align-items: center;
                /*background: grey;*/
            }
            .search-input-wrap input{
                width: 650px;
                height: 60px;
                padding-left: 30px;
                border-radius: 40px;
                border:0.1pt solid rgba(220, 220, 220, 0.8);
            }
            .user-wrap{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .msg-wrap{
                    margin-right: 20px;
                    display: flex;
                    flex-direction: row;
                }
                .msg-icon{
                    width: 24px;
                    height: 24px;
                    margin-right: 5px;
                    background: url("/static/images/bell2.png") 100% 100%;
                    background-size: contain;
                }
                .user-img img{
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                }
                .search-action{
                    /*border: 1px red solid;*/
                    width: 100px;
                    height: 40px;
                    margin-left: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 20px;
                    padding: 2px 10px;
                    background: #bfcdda;
                    color:#ffffff;
                    font-size: 18px;
                    font-weight: 400;
                }
            }
        }

        /*导航条布局*/
        .nav{
            width: 1440px;
            margin-top: 20px;
            height: 60px;
            font-size: 24px;
            border-radius: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            /*background: #333333;*/
        }

        .user-info-wrap{
            position: relative;
            width: 1440px;
            margin-top: 20px;
            height: 350px;
            /*border: 1px solid red;*/
            display: flex;
            background: #bfcdda;
            flex-direction: column;
            align-items: center;
            .user-big-icon{
                width: 140px;
                height: 140px;
                border-radius: 50%;
                margin-top: 20px;
                background: url("/static/images/thumb.png") 100% 100%;
                background-size: contain;
            }
            .user-name{
                margin-top: 10px;
            }
            .user-brief-des{
                margin-top: 10px;
            }
            .recommend-btn{
                position: absolute;
                width: 100px;
                height: 40px;
                border-radius: 5px;
                top: 10px;
                right:20px;
                line-height: 40px;
                text-align: center;
                background: #FFFFFF;
            }
        }
        .user-count-wrap{
            width: 800px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            /*border: 1px solid red;*/
            .user-count-item{
                width: 100px;
                font-size: 22px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
        }

        .grid-switch-title{
            width: 300px;
            height: 50px;
            margin:30px 0;
            display: flex;
            justify-content: space-around;
            font-size: 24px;
            /*border: 1px solid red;*/
        }
        .grid-switch-title .comments{
            border-bottom:  5px #bfcdda solid;
        }


        .contain{
            background: rgba(250,250, 250, 0.8);
            padding: 20px 0;
            width: 1300px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*border:1px solid red;*/
            .item{
                background: white;
                margin-bottom: 20px;
                display: flex;
                flex-direction: row;
                padding: 10px 10px;
                .user-wrap{
                    display: flex;
                    justify-content: space-between;
                    .img-box{
                        width: 100px;
                        /*background: #F2F2F2;*/
                        display: flex;
                        justify-content: center;
                    }
                    .img-box img{
                        width: 72px;
                        height: 72px;
                        margin-top: 10px;
                        border-radius: 50%;
                    }
                }
                .comment-wrap{
                    display: flex;
                    flex-direction: column;
                    .title{
                        padding-right: 20px;
                        display: flex;
                        justify-content: space-between;
                        font-size: 14px;
                        margin-bottom: 10px;
                        .cuser{
                            margin-right: 20px;
                        }
                    }
                    .reply{
                        padding-right: 20px;
                        margin-top: 10px;
                        font-size: 14px;
                        display: flex;
                        justify-content: space-between;
                        .reply-left{
                            color: #cecece;
                        }
                    }
                }
            }
        }




        /*footer布局*/
        .footer-wrap{
            display: flex;
            justify-content: center;
            background: #cccccc;
        }
        .footer{
            width: 1440px;
            height: 60px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            .outer-link{
                display: flex;
                justify-content: space-around;
            }
        }
        .outer-link div a{
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="search-header">
        <div class="search-title-wrap">
            <div class="search-title-icon"></div>
            <div class="search-title"><a href="/index.php">haishuyun</a></div>
        </div>
        <div class="search-input-wrap">
            <input class="search-input" placeholder="请输入查询内容...">
            <div class="search-icon"></div>
        </div>
        <div class="user-wrap">
            <div class="msg-wrap">
                <div class="msg-icon"></div>
                <div class="msg">消息</div>
            </div>
            <div class="user-img">
                <img src="/static/images/thumb.png" alt="暂无头像" onclick="toUser()">
            </div>
            <div class="search-action">
                <div>创作</div>
            </div>
        </div>
    </div>
    <div class="nav">
        <div><a href="">关注</a></div>
        <div><a href="">头条</a></div>
        <div><a href="">知识</a></div>
        <div><a href="">政策法规</a></div>
        <div class="nav-product"><a href="/product.php">产品服务</a></div>
        <div><a href="">招聘</a></div>
        <div><a href="">人物</a></div>
        <div><a href="">分享</a></div>
        <div><a href="">企业</a></div>
    </div>
    <div class="user-info-wrap">
        <div class="recommend-btn"><a href="javascript:volid(0)" onclick="changeFace()">修改封面</a></div>
        <div class="user-big-icon"></div>
        <div class="user-name">haishuyun</div>
        <div class="user-brief-des">这个人很懒，什么都没留下~</div>
        <div class="user-count-wrap">
            <div class="articles user-count-item">
                <div class="-num">12</div>
                <div>文章</div>
            </div>
            <div class="fun user-count-item">
                <div class="-num">5002</div>
                <div>粉丝</div>
            </div>
            <div class="follows user-count-item">
                <div class="-num">18000</div>
                <div>关注</div>
            </div>
            <div class="thumbs user-count-item">
                <div class="-num">852</div>
                <div>点赞</div>
            </div>
            <div class="comments user-count-item">
                <div class="-num">620</div>
                <div>评论</div>
            </div>
            <div class="stores user-count-item">
                <div class="-num">98</div>
                <div>收藏</div>
            </div>
            <div class="forwards user-count-item">
                <div class="-num">165</div>
                <div>转发</div>
            </div>
        </div>
    </div>
    <div class="grid-switch-title">
        <div class="chapter" onclick="getLists('chapter')">文章</div>
        <div class="comments" onclick="getLists('comments')">评论</div>
        <div class="stores" onclick="getLists('stores')">收藏</div>
    </div>

    <div class="contain">
        <div class="item">
            <div class="user-wrap">
                <div class="img-box"><img src="/static/images/thumb.png" alt=""></div>
            </div>
            <div class="comment-wrap">
                <div class="title">
                    <div class="title-left">
                        <span class="cuser">阿凡达的驴</span>评论文章《<a class="chapter" href="">中小企业管理特征</a>》
                    </div>
                    <div class="title-right">
                        <a href="#">查看详情</a>
                    </div>
                </div>
                <div class="paragraph">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </div>
                <div class="reply">
                    <div class="reply-left"><span class="human-day">昨天</span> · <span class="human-time">17:12</span></div>
                    <div class="reply">回复</div>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="user-wrap">
                <div class="img-box"><img src="/static/images/thumb.png" alt=""></div>
            </div>
            <div class="comment-wrap">
                <div class="title">
                    <div class="title-left">
                        <span class="cuser">阿凡达的驴</span>评论文章《<a class="chapter" href="">中小企业管理特征</a>》
                    </div>
                    <div class="title-right">
                        <a href="#">查看详情</a>
                    </div>
                </div>
                <div class="paragraph">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </div>
                <div class="reply">
                    <div class="reply-left"><span class="human-day">昨天</span> · <span class="human-time">17:12</span></div>
                    <div class="reply">回复</div>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="user-wrap">
                <div class="img-box"><img src="/static/images/thumb.png" alt=""></div>
            </div>
            <div class="comment-wrap">
                <div class="title">
                    <div class="title-left">
                        <span class="cuser">阿凡达的驴</span>评论文章《<a class="chapter" href="">中小企业管理特征</a>》
                    </div>
                    <div class="title-right">
                        <a href="#">查看详情</a>
                    </div>
                </div>
                <div class="paragraph">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </div>
                <div class="reply">
                    <div class="reply-left"><span class="human-day">昨天</span> · <span class="human-time">17:12</span></div>
                    <div class="reply">回复</div>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="user-wrap">
                <div class="img-box"><img src="/static/images/thumb.png" alt=""></div>
            </div>
            <div class="comment-wrap">
                <div class="title">
                    <div class="title-left">
                        <span class="cuser">阿凡达的驴</span>评论文章《<a class="chapter" href="">中小企业管理特征</a>》
                    </div>
                    <div class="title-right">
                        <a href="#">查看详情</a>
                    </div>
                </div>
                <div class="paragraph">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </div>
                <div class="reply">
                    <div class="reply-left"><span class="human-day">昨天</span> · <span class="human-time">17:12</span></div>
                    <div class="reply">回复</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer-wrap">
    <div class="footer">
        <div class="copyright">Copyright © 2023 海数云 版权所有 渝ICP备2022012388号</div>
        <div class="outer-link">
            <div><a href="">用户协议</a></div>
            <div><a href="">隐私政策</a></div>
            <div><a href="">媒体合作</a></div>
            <div><a href="">广告合作</a></div>
            <div><a href="">友情链接</a></div>
            <div><a href="">反馈建议</a></div>
        </div>
    </div>
</div>
</body>
<script>

    $(document).ready(function(){
        $(".data-1x > img").attr('src', '/static/images/data-1x.jpg');
    })

    function getLists(type){
        if ( type === 'chapter'){
            $(".grid-switch-title div").css("border-bottom", "none");
            $(".grid-switch-title .chapter").css("border-bottom", "5px #bfcdda solid");
        }
        if ( type === 'comments'){
            $(".grid-switch-title div").css("border-bottom", "none");
            $(".grid-switch-title .comments").css("border-bottom", "5px #bfcdda solid");
        }
        if ( type === 'stores'){
            $(".grid-switch-title div").css("border-bottom", "none");
            $(".grid-switch-title .stores").css("border-bottom", "5px #bfcdda solid");
        }
    }

    //修改用户封面图片
    function changeFace(){
        alert('修改封面');

    }

    //显示操作按钮
    function showOpBox(){
        let opBox = `<div class="op-box">
                <div class="edit" onclick="opEdit()">
                    <div></div>
                    <div><a href="javascript:void(0)" onclick="opEdit()">编辑</a></div>
                </div>
               <div class="delete" onclick="opDelete()">
                    <div></div>
                    <div><a href="javascript:void(0)" onclick="opDelete()">删除</a></div>
                </div>
    </div>`;
        $(".data-1x").append(opBox);
    }

    //删除操作按钮
    function deleteOpBox(){
        $(".data-1x .op-box").detach();
    }


    function opEdit(){
        alert('edit');
    }
    function opDelete(){
        alert('delete');
    }

    function toUser(){
        window.location.href="/index.php";
    }
</script>
</html>